<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>群聊天</title>
    <link rel="stylesheet" href="{{asset('src/layui/css/layui.css')}}">
    <link rel="stylesheet" href="{{asset('src/css/client_chat.css')}}">
    <link rel="stylesheet" href="{{asset('src/css/common.css')}}">
</head>

<body>
    <div class="box">

        <div class="head_box">
            <a class="back_a" onclick="redirectView('{{ route('user.list', ['user_id' => $user_id,'type'=>'group']) }}')">
                <i class="layui-icon layui-icon-return"></i>
            </a>
            <span id="addressee_name">正在连接中...</span>
            <span></span>
        </div>
        <section class="chat_window">
            {{--聊天记录--}}
        </section>
        <section class="input_box">
            <div class="button_box">
                {{--表情--}}
                <a href="javascript:void(0);" class="emoji_a" title="表情">
                    <img src="{{asset('src/images/system/biaoqing.png')}}" alt="" onclick="showEmoji()">
                    <div class="emoji_box">
                        <button type="button" onclick="showEmoji()">x</button>
                        <div id="emoji_div">
                            <span>😀</span>
                            <span>😁</span>
                            <span>😂</span>
                            <span>🤣</span>
                            <span>😃</span>
                            <span>😄</span>
                            <span>😅</span>
                            <span>😆</span>
                            <span>😉</span>
                            <span>😊</span>
                            <span>😋</span>
                            <span>😎</span>
                            <span>😍</span>
                            <span>😘</span>
                            <span>😗</span>
                            <span>😙</span>
                            <span>😚</span>
                            <span>🙂</span>
                            <span>🤗</span>
                            <span>🤩</span>
                            <span>😏</span>
                            <span>😌</span>
                            <span>😛</span>
                            <span>😜</span>
                            <span>😝</span>
                            <span>🤤</span>
                            <span>😒</span>
                            <span>😓</span>
                            <span>😔</span>
                            <span>😕</span>
                            <span>🙃</span>
                            <span>🤑</span>
                            <span>😲</span>
                            <span>☹️</span>
                            <span>🙁</span>
                            <span>😖</span>
                            <span>😞</span>
                            <span>😟</span>
                            <span>😤</span>
                            <span>😢</span>
                            <span>😭</span>
                            <span>😦</span>
                            <span>😧</span>
                            <span>😨</span>
                            <span>😩</span>
                            <span>🤯</span>
                            <span>😬</span>
                            <span>😰</span>
                            <span>😱</span>
                            <span>😳</span>
                            <span>🤪</span>
                            <span>😵</span>
                            <span>😡</span>
                            <span>😠</span>
                            <span>🤬</span>
                            <span>😷</span>
                            <span>🤒</span>
                            <span>🤕</span>
                            <span>🤢</span>
                            <span>🤮</span>
                            <span>🤧</span>
                            <span>😇</span>
                            <span>🤠</span>
                            <span>🤡</span>
                            <span>🤥</span>
                            <span>🤫</span>
                            <span>🤭</span>
                            <span>🧐</span>
                            <span>🤓</span>
                            <span>😈</span>
                            <span>👿</span>
                            <span>👹</span>
                            <span>👺</span>
                            <span>💀</span>
                            <span>👻</span>
                            <span>👽</span>
                            <span>👾</span>
                            <span>🤖</span>
                            <span>💩</span>
                            <span>😺</span>
                            <span>😸</span>
                            <span>😹</span>
                            <span>😻</span>
                            <span>😼</span>
                            <span>😽</span>
                            <span>🙀</span>
                            <span>😿</span>
                            <span>😾</span>
                        </div>
                    </div>
                </a>
                {{--图片--}}
                <a href="javascript:void(0);" title="图片">
                    <img src="{{asset('src/images/system/tupian.png')}}" alt="" id="ID-upload-demo-btn">
                </a>
                {{--文件--}}
                <a href="javascript:void(0);" title="文件">
                    <img src="{{asset('src/images/system/wenjina.png')}}" alt="" id="ID-upload-demo-btn-file">
                </a>
            </div>
            <textarea id="content" maxlength="-1" placeholder="请输入内容..."></textarea>
            <div class="send_button">
                <button id="send_btn" onclick="sendText()">发送</button>
            </div>
        </section>

        <section id="open_chat_img_box" onclick="openChatImg()">
            <div id="open_chat_img_box_img">
                <img id="ocibx_img" src="" alt="" onclick="return false">
            </div>
        </section>
    </div>
</body>


<script src="{{asset('src/js/jquery.js')}}"></script>
<script src="{{asset('src/layui/layui.js')}}"></script>
<script>
    const imgEl = document.getElementById('ocibx_img');

    imgEl.addEventListener('wheel', function(e) {
        e.preventDefault(); // 阻止默认行为，如滚动页面
        const scaleNum = Number(imgEl.style.transform.replace('scale(', '').replace(')', '')) || 1

        // 根据滚轮方向调整图片大小
        if (e.deltaY < 0 && scaleNum < 2) {
            // 向下滚动，放大图片
            imgEl.style.transform = `scale(${ scaleNum + 0.1 })`; // 增加10%的大小
        } else if (e.deltaY > 0 && scaleNum > 1) {
            // 向上滚动，缩小图片
            imgEl.style.transform = `scale(${ scaleNum - 0.1 })`; // 减少到90%的大小
        }
    }, {
        passive: false
    });

    layui.use(function() {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: "{{route('common.uploadFileObs')}}", // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            data: {
                '_token': '{{csrf_token()}}',
                'dir': 'chat_records/content'
            },
            size: 4100, //最大允许上传的文件大小(单位KB)
            done: function(res) {
                // console.log(res);
                // 若上传失败
                if (res.code != 200) {
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                sendImages(res.data.ol_url, res.data.url, res.data.name) //发送图片
            },
        });

        // 单文件上传
        var uploadFile = upload.render({
            elem: '#ID-upload-demo-btn-file',
            url: "{{route('common.uploadFileObs')}}", // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            data: {
                '_token': '{{csrf_token()}}',
                'dir': 'chat_records/content',
            },
            accept: 'file', // 允许选择任意类型的文件
            size: 102400, //最大允许上传的文件大小(单位KB)
            done: function(res) {
                console.log('上传', res);
                // 若上传失败
                if (res.code != 200) {
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                sendFile(res.data.ol_url, res.data.url, res.data.name) //发送文件
            },
        });
    });

    scrollHeight()
    //将滚动条移动到底部
    function scrollHeight() {
        var $chatWindow = $(".chat_window");
        var scrollHeight = $chatWindow.prop("scrollHeight");
        var offsetHeight = $chatWindow.innerHeight(); // 或者 $chatWindow[0].offsetHeight;

        // 计算需要滚动的高度
        var scrollPosition = scrollHeight - offsetHeight;

        // 滚动到指定位置
        $chatWindow.scrollTop(scrollPosition);

    }

    //获取当前时间
    function getTime() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var time = hours + ':' + (minutes < 10 ? '0' + minutes : minutes);
        return time;
    }

    //返回上一页
    function redirectView(url) {
        // console.log(url)
        //发送ajax-清空指定用户在指定群组中的未读消息数量
        $.ajax({
            url: "{{route('chat.delUnreadNum')}}",
            type: 'POST',
            data: {
                '_token': '{{csrf_token()}}',
                'user_id': "{{$user_id}}", //当前user用户表的id
                'group_id': "{{$group_id}}", //群组id
            },
            success: function(res) {
                window.location.href = url;
            },
            error: function(res) {
                // console.log(res);
            }
        });
    }

    /**
     * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
     * 其中端口为Gateway端口，即start_gateway.php指定的端口。
     * start_gateway.php 中需要指定websocket协议，像这样
     * $gateway = new Gateway(websocket://0.0.0.0:8282
     */

    var bind_id; //发件人id(binding_records表id)
    var addressee_id; //收件人id(binding_records表id)
    var group_id = "{{$group_id}}"; //群组id(user_chat_groups表id)



    /**
     * 第一步：与socket建立链接
     * 打开一个 web socket (以下链接方式任选一种即可)
     * 参数解释：var ws = new WebSocket("参数A://参数B:参数C");
     * 参数A：固定写法
     ws：表示http连接
     wss:表示https连接,有https证书的时候使用
     * 参数B：要连接的地址。
     可选参数：127.0.0.1 表示：本地地址
     可选参数：48.662.156.869 表示：你的云服务器的公网ip  （48.662.156.869这个ip是我假设的云服务器公网ip）
     可选参数：im_dev.liutong.pro 表示：这个你的http域名 如（http://im_dev.liutong.pro）
     可选参数：im.liutong.pro 表示：这个是你的https网址域名 如（https://im.liutong.pro）
     * 参数C：端口号
     端口号是可以自定义的（注意取值范围）。记得在服务器->实例安全组中进行放行。
     端口号取值范围：端口不能大于65535，请确认端口没有被其它程序占用，否则启动会报错。如果端口小于1024，需要root权限运行GatewayWorker才能有权限监听，否则报错没有权限。(详情参见手册->《Gateway类的使用》->"初始化"->"ip")
     注意：这里的端口号必须和你在 "项目名\GatewayWorker\Applications\YourApp\start_gateway.php" 中$gateway = new Gateway("websocket://0.0.0.0:8282");这段代码的端口号保持一致。
     */
    // var ws = new WebSocket("ws://127.0.0.1:8282");//进行webSocket的几种方式（方式A：常规操作）
    // var ws = new WebSocket("ws://47.104.249.193:8282");//进行webSocket的几种方式（方式B：使用本机公网ip进行连接）
    // var ws = new WebSocket("ws://jim.liutong.pro:8282");//进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
    var ws = new WebSocket("{{config('gateway_worker.ws_url')}}"); //进行webSocket的几种方式（方式C:使用http://jim.liutong.pro的方式进行连接）
    // 服务端主动推送消息时会触发这里的onmessage

    //检测websocket是否链接
    // ws.onopen = function () {
    //     console.log("连接成功");
    // };

    // 关闭 websocket
    ws.onclose = function() {
        console.log("连接已关闭...");
    };

    ws.onmessage = function(e) {
        // json数据转换成js对象
        var data = eval("(" + e.data + ")");
        var type = data.type || '';
        var html = ""
        console.log('data=', data, 'type=', type);
        // console.log(type,222);
        // console.log(data.addressee_id == bind_id,333);
        switch (type) {
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                binding(data.client_id)
                break;
            case 'text': //监听文字类型消息
                //朋友来消息了
                //console.log(88888,data , bind_id)
                //收件人id==当前登录用户b_id
                if (data.group_id == group_id && bind_id != data.bind_id) {
                    console.log('text=' + data);
                    appendTextHtml(data.content, getTime(), data.user_name, 'left')
                }
                break;
            case 'images': //监听图片类型消息
                //朋友来消息了
                //收件人b_id==当前登录用户bid
                if (data.group_id == group_id && bind_id != data.bind_id) {
                    console.log('images=' + data.content);
                    appendImgHtml(data.content.ol_url, getTime(), data.user_name, 'left')
                }
                break;
            case 'file': //监听文件类型消息
                //朋友来消息了
                //收件人b_id==当前登录用户bid
                if (data.group_id == group_id && bind_id != data.bind_id) {
                    console.log('filr=' + data.content);
                    appendFileHtml(data.content.ol_url, data.content.file_name, getTime(), data.user_name, 'left')
                }
                break;
                // 当mvc框架调用GatewayClient发消息时直接alert出来
            default:
                //如果报400状态 token异常就刷新页面
                if (data.status == 400) {
                    setTimeout(function() {
                        // 这里是需要暂停1.5秒后执行的代码
                        window.location.reload()
                    }, 1500);
                    // layer.msg('连接失败,请刷新页面后再试')
                }
        }
        $('.chat_window').append(html);
        scrollHeight()
    };

    /**
     * 初始化绑定用户
     * @param string client_id gatwaywork给的用户id
     */
    function binding(client_id) {
        $.ajax({
            url: "{{route('chat.binding')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'client_id': client_id, //wensocket临时id标识
                'user_id': "{{$user_id}}", //当前登录的用户id(用户表id,只有都换成绑定表id时才可以互相发消息)
                'role': 2, //用户角色|1:客服,2:用户
            },
            dataType: 'json', // 响应数据类型
            success: function(res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg(res.msg);
                }
                bind_id = res.data.bind_id //当前我的用户bind_id
                joinGroup() //加入群组
                //获取群组聊天记录列表
                getGroupMsgList()
            },
            error: function(xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });

    }
    //加入群组
    function joinGroup() {

        $.ajax({
            url: "{{route('chat.joinGroup')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'bind_id': bind_id, //当前我的用户bind_id
                'user_id': "{{$user_id}}", //当前登录的用户id(用户表id,只有都换成绑定表id时才可以互相发消息)
                'group_id': "{{$group_id}}", //收件人id(用户表id,只有都换成绑定表id时才可以互相发消息)
            },
            dataType: 'json', // 响应数据类型
            success: function(res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg(res.msg);
                }
                $('#addressee_name').text(res.group_name)
            },
            error: function(xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });
    }

    //获取群组聊天记录列表
    function getGroupMsgList() {
        $.ajax({
            url: "{{route('chat.getGroupMsgList')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'user_id': "{{$user_id}}", //当前登录的用户id(用户表id,只有都换成绑定表id时才可以互相发消息)
                'group_id': "{{$group_id}}", //收件人id(用户表id,只有都换成绑定表id时才可以互相发消息)
            },
            dataType: 'json', // 响应数据类型
            success: function(res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg(res.msg);
                }
                // console.log(999,res)
                res.data.forEach((item, index) => {
                    let type = ''
                    if (bind_id == item.sender_id) {
                        //我自己发出去的消息
                        type = 'right'
                    } else {
                        //好友发送出去的消息
                        type = 'left'
                    }

                    let content = ''
                    if (item.content.type == "text") {
                        content = item.content.content
                        appendTextHtml(content, item.created_at, item.binding_record.user.nickname, type) //渲染文本消息
                    } else if (item.content.type == "images") {
                        //图片类型
                        content = item.content.content.ol_url
                        appendImgHtml(content, item.created_at, item.binding_record.user.nickname, type) //渲染附件消息
                    } else {
                        //文件类型
                        content = item.content.content.ol_url
                        let file_name = item.content.content.file_name
                        appendFileHtml(content, file_name, item.created_at, item.binding_record.user.nickname, type)
                    }
                })
                scrollHeight()
            },
            error: function(xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });
    }


    /**
     * 发送文字消息
     */
    //监听回车事件
    $('#content').keydown(function(event) {
        if (event.keyCode == 13) {
            sendText()
        }
    });

    //发送文本消息
    function sendText() {
        // 回车键被按下
        let content = $('#content').val()

        if (!content) {
            alert('请输入内容');
            return false;
        }

        $.ajax({
            url: "{{route('chat.sendToGroupMassage')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'bind_id': bind_id, //当前绑定用户id
                'user_id': "{{$user_id}}", //当前user用户表的id
                'group_id': "{{$group_id}}", //群组id
                'type': 'text', //消息类型
                'role': 2, //用户身份,1:客服,2:用户
                'content': content, //消息内容
            },
            dataType: 'json', // 响应数据类型
            success: function(res) { // 请求成功的回调函数
                appendTextHtml(content, getTime(), "{{$user_nickname}}", 'right')
                $('#content').val('')
                scrollHeight() //将滚动条移动到底部
            },
            error: function(xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });
    }

    //发送图片类型请求
    function sendImages(ol_url, url, file_name) {
        if (!ol_url || !url) {
            layer.msg('发送图片失败');
            return false;
        }
        $.ajax({
            url: "{{route('chat.sendToGroupMassage')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'bind_id': bind_id, //当前用户id
                'user_id': "{{$user_id}}", //当前user用户表的id
                'type': 'images', //消息类型
                'role': 2, //用户身份,1:客服,2:用户
                'group_id': "{{$group_id}}", //群组id
                'content': {
                    'ol_url': ol_url,
                    'url': url,
                    'file_name': file_name
                }, //消息内容
            },
            dataType: 'json', // 响应数据类型
            success: function(res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg('发送失败');
                }
                appendImgHtml(ol_url, getTime(), "{{$user_nickname}}", 'right')
                scrollHeight() //将滚动条移动到底部
            },
            error: function(xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });

    }

    //发送文件类型请求
    function sendFile(ol_url, url, file_name) {
        if (!ol_url || !url) {
            layer.msg('发送文件失败');
            return false;
        }
        $.ajax({
            url: "{{route('chat.sendToGroupMassage')}}", // 请求的 URL
            type: 'POST', // 请求方法
            data: {
                '_token': '{{csrf_token()}}',
                'bind_id': bind_id, //当前用户id
                'user_id': "{{$user_id}}", //当前user用户表的id
                'type': 'file', //消息类型
                'role': 2, //用户身份,1:客服,2:用户
                'group_id': "{{$group_id}}", //群组id
                'content': {
                    'ol_url': ol_url,
                    'url': url,
                    'file_name': file_name
                }, //消息内容
            },
            dataType: 'json', // 响应数据类型
            success: function(res) { // 请求成功的回调函数
                if (res.code != 200) {
                    return layer.msg('发送失败');
                }
                appendFileHtml(ol_url, file_name, getTime(), "{{$user_nickname}}", 'right') //渲染File
                scrollHeight() //将滚动条移动到底部
            },
            error: function(xhr, status, error) { // 请求失败的回调函数
                console.log(error);
            }
        });

    }

    //渲染Text
    function appendTextHtml(content, date, user_name, type = 'left') {
        var html
        if (type == 'left') {
            //好友发过来的消息
            let pic = "{{asset('src/images/system/pic_2.png')}}"
            html = `
                <div class="msg_box">
                    <div class="pic">
                        <img src="${pic}" alt="">
                        <span>${date}</span>
                    </div>
                    <div class="msg">
                        <div class="user">
                             <span>${user_name}</span>
                        </div>
                        <div class="chat_box">
                            <p>${content}</p>
                        </div>
                    </div>
                </div>
            `
        } else {
            //我发出的消息
            let pic = "{{asset('src/images/system/pic_1.png')}}"
            html = `
                <div class="msg_box right_msg_box">
                    <div class="msg">
                        <div class="user">
                             <span>${user_name}</span>
                        </div>
                        <div class="chat_box">
                            <p>${content}</p>
                        </div>
                    </div>
                    <div class="pic">
                        <img src="${pic}" alt="">
                        <span>${date}</span>
                    </div>
                </div>
            `
        }

        $('.chat_window').append(html)
    }

    //渲染Img
    function appendImgHtml(ol_url, date, user_name, type = 'left') {
        var html
        if (type == 'left') {
            //好友发过来的消息
            let pic = "{{asset('src/images/system/pic_2.png')}}"
            html = `
                <div class="msg_box">
                    <div class="pic">
                        <img src="${pic}" alt="">
                        <span>${date}</span>
                    </div>
                    <div class="msg">
                        <div class="user">
                             <span>${user_name}</span>
                        </div>
                        <div class="chat_box">
                            <a href="javascript:void(0);" onclick="openChatImg('${ol_url}')">
                                <img class="chat_img" src="${ol_url}" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            `
        } else {
            //我发出的消息
            let pic = "{{asset('src/images/system/pic_1.png')}}"
            html = `
                <div class="msg_box right_msg_box">
                    <div class="msg">
                        <div class="user">
                             <span>${user_name}</span>
                        </div>
                        <div class="chat_box">
                            <a href="javascript:void(0);" onclick="openChatImg('${ol_url}')">
                                <img class="chat_img" src="${ol_url}" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="pic">
                        <img src="${pic}" alt="">
                        <span>${date}</span>
                    </div>
                </div>`
        }

        $('.chat_window').append(html)
    }

    //渲染File ol_url=文件路径,date=发送时间,type='left'=left:好友发送的|right:当前登陆用户发送的
    function appendFileHtml(ol_url, file_name, date, user_name, type = 'left') {
        var file_extension = '' //获取文件后缀
        if (!file_name) {
            file_name = '未知'
        }
        if (!file_name) {
            file_name = '未知'
        } else {
            // 获取文件后缀
            file_extension = file_name.substring(file_name.lastIndexOf('.') + 1);
            file_extension = '.' + file_extension
            // 获取文件名
            file_name = file_name.substring(0, file_name.lastIndexOf('.'));
        }

        var icon_img = "{{asset('src/images/system/wenjian_2.png')}}"
        var html
        if (type == 'left') {
            //好友发过来的消息
            let pic = "{{asset('src/images/system/pic_2.png')}}"
            html = `
                <div class="msg_box">
                    <div class="pic">
                        <img src="${pic}" alt="">
                        <span>${date}</span>
                    </div>
                    <div class="msg">
                        <div class="user">
                             <span>${user_name}</span>
                        </div>
                        <div class="chat_box">
                            <a href="${ol_url}" class="file_box" target="_blank">
                                 <div class="left">
                                    <p>${file_name}</p>
                                    <span>&nbsp;${file_extension}</span>
                                </div>
                                <img src="${icon_img}" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            `
        } else {
            //我发出的消息
            let pic = "{{asset('src/images/system/pic_1.png')}}"

            html = `
                <div class="msg_box right_msg_box">
                    <div class="msg">
                        <div class="user">
                             <span>${user_name}</span>
                        </div>
                        <div class="chat_box">
                            <a href="${ol_url}" class="file_box" target="_blank">
                                 <div class="left">
                                    <p>${file_name}</p>
                                    <span>&nbsp;${file_extension}</span>
                                </div>
                                <img src="${icon_img}" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="pic">
                        <img src="${pic}" alt="">
                        <span>${date}</span>
                    </div>
                </div>
            `
        }

        $('.chat_window').append(html)
    }

    //展示表情
    function showEmoji() {
        $('.emoji_box').toggle(); // 切换表情列表的显示和隐藏状态
    }

    // 插入选中的表情到文本输入框
    function insertEmoji(emoji) {
        let text_input = $('#content');
        let currentVal = text_input.val(); // 获取当前文本输入框的值
        text_input.val(currentVal + emoji); // 在当前值后面追加选中的表情
        showEmoji(); // 隐藏表情列表
    }

    // 监听点击表情事件
    $('#emoji_div').on('click', 'span', function() {
        let selectedEmoji = $(this).text(); // 获取被点击的表情
        insertEmoji(selectedEmoji); // 插入选中的表情到文本输入框
    });

    //打开展示图片
    function openChatImg(url = '') {
        console.log('图', url)
        if (url) {
            $('#open_chat_img_box div img').attr('src', url); // 设置放大后的图片地址
        }
        $('#open_chat_img_box').toggle(); // 切换显示和隐藏
    }
</script>

</html>